<html>
  <head>
    <title>My first THREE.js app</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <script src="./three.js"></script>
    <script src="./orbit.js"></script>
    <script>
      let datasets = [
        [{ radiusBottom: 0.6, radiusTop: 0, length: 0.65 }],
        [{ radiusBottom: 1.8, radiusTop: 0, length: 1.3 }],
        [
          { radiusBottom: 3.4, radiusTop: 1.4, length: 1.3 },
          { radiusBottom: 1.4, radiusTop: 0, length: 1.3 },
        ],
        [
          { radiusBottom: 5.3, radiusTop: 3.6, length: 1.3 },
          { radiusBottom: 3.6, radiusTop: 1.7, length: 1.3 },
          { radiusBottom: 1.7, radiusTop: 0, length: 2 },
        ],
        [
          { radiusBottom: 7.1, radiusTop: 5.6, length: 1.3 },
          { radiusBottom: 5.6, radiusTop: 4.3, length: 1.3 },
          { radiusBottom: 4.3, radiusTop: 1.4, length: 2 },
          { radiusBottom: 1.4, radiusTop: 0, length: 2 },
        ],
        [
          { radiusBottom: 9.2, radiusTop: 7, length: 1.3 },
          { radiusBottom: 7, radiusTop: 6.1, length: 1.3 },
          { radiusBottom: 6.1, radiusTop: 3.4, length: 2 },
          { radiusBottom: 3.4, radiusTop: 1, length: 2 },
          { radiusBottom: 1, radiusTop: 0, length: 1 },
        ],
        [
          { radiusBottom: 10.9, radiusTop: 8.3, length: 1.3 },
          { radiusBottom: 8.3, radiusTop: 7.3, length: 1.3 },
          { radiusBottom: 7.3, radiusTop: 5, length: 2 },
          { radiusBottom: 5, radiusTop: 2.6, length: 2 },
          { radiusBottom: 2.6, radiusTop: 0, length: 2 },
        ],
        [
          { radiusBottom: 12.6, radiusTop: 9.4, length: 1.3 },
          { radiusBottom: 9.4, radiusTop: 8.6, length: 1.3 },
          { radiusBottom: 8.6, radiusTop: 6.5, length: 2 },
          { radiusBottom: 6.5, radiusTop: 3.9, length: 2 },
          { radiusBottom: 3.9, radiusTop: 1.5, length: 2 },
          { radiusBottom: 1.5, radiusTop: 0, length: 1 },
        ],
        [
          { radiusBottom: 14, radiusTop: 10.4, length: 1.3 },
          { radiusBottom: 10.4, radiusTop: 9.4, length: 1.3 },
          { radiusBottom: 9.4, radiusTop: 7.3, length: 2 },
          { radiusBottom: 7.3, radiusTop: 5.1, length: 2 },
          { radiusBottom: 5.1, radiusTop: 2.6, length: 2 },
          { radiusBottom: 2.6, radiusTop: 0, length: 2 },
        ],
        [
          { radiusBottom: 15.3, radiusTop: 11.4, length: 1.3 },
          { radiusBottom: 11.4, radiusTop: 10.4, length: 1.3 },
          { radiusBottom: 10.4, radiusTop: 8.3, length: 2 },
          { radiusBottom: 8.3, radiusTop: 6.5, length: 2 },
          { radiusBottom: 6.5, radiusTop: 4.1, length: 2 },
          { radiusBottom: 4.1, radiusTop: 0.8, length: 2 },
          { radiusBottom: 0.8, radiusTop: 0, length: 0.3333333333333339 },
        ],
        [
          { radiusBottom: 16.4, radiusTop: 12.2, length: 1.3 },
          { radiusBottom: 12.2, radiusTop: 11.1, length: 1.3 },
          { radiusBottom: 11.1, radiusTop: 9, length: 2 },
          { radiusBottom: 9, radiusTop: 7.2, length: 2 },
          { radiusBottom: 7.2, radiusTop: 5, length: 2 },
          { radiusBottom: 5, radiusTop: 1.3, length: 2 },
          { radiusBottom: 1.3, radiusTop: 0, length: 0.6666666666666661 },
        ],
        [
          { radiusBottom: 17.3, radiusTop: 12.9, length: 1.3 },
          { radiusBottom: 12.9, radiusTop: 11.8, length: 1.3 },
          { radiusBottom: 11.8, radiusTop: 9.8, length: 2 },
          { radiusBottom: 9.8, radiusTop: 8.1, length: 2 },
          { radiusBottom: 8.1, radiusTop: 6, length: 2 },
          { radiusBottom: 6, radiusTop: 1.8, length: 2 },
          { radiusBottom: 1.8, radiusTop: 0, length: 1 },
        ],
      ];

      let datas = [
        { radiusBottom: 17.3, radiusTop: 12.9, length: 1.3, height: 0.65 },
        { radiusBottom: 12.9, radiusTop: 11.8, length: 1.3, height: 1.95 },
        { radiusBottom: 11.8, radiusTop: 9.8, length: 2, height: 3.6 },
        { radiusBottom: 9.8, radiusTop: 8.1, length: 2, height: 5.6 },
        { radiusBottom: 8.1, radiusTop: 6.0, length: 2, height: 7.6 },
        { radiusBottom: 6.0, radiusTop: 1.8, length: 2, height: 9.6 },
        { radiusBottom: 1.8, radiusTop: 0, length: 1, height: 11.1 },
      ];

      let scene = new THREE.Scene();
      let camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      let renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      let objects = datas.map((data) => {
        let { radiusBottom, radiusTop, length, height } = data;
        let geometry = new THREE.CylinderGeometry(
          radiusTop / 40,
          radiusBottom / 40,
          length,
          18,
          6
        );
        let material = new THREE.MeshBasicMaterial({
          color: 0x00ff00,
          wireframe: true,
        });
        let object = new THREE.Mesh(geometry, material);
        object.position.y = height;
        scene.add(object);
        return object;
      });

      camera.position.x = 10;

      function render() {
        renderer.render(scene, camera);
      }

      var controls = new THREE.OrbitControls(camera, renderer.domElement);
      controls.addEventListener('change', render);

      render();
    </script>
  </body>
</html>
